<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统 - LayUI Table版本</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        body {
            background-color: #f2f2f2;
            font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        
        .header {
            height: 65px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            line-height: 65px;
            padding: 0 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 25px;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="40%"><stop offset="0%" stop-color="%23fff" stop-opacity=".1"/><stop offset="100%" stop-color="%23fff" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
            opacity: 0.1;
        }
        
        .header h2 {
            font-size: 24px;
            font-weight: 600;
            display: inline-block;
            position: relative;
            z-index: 1;
            margin: 0;
        }
        
        .header .version-info {
            position: relative;
            z-index: 1;
            opacity: 0.9;
            font-size: 14px;
        }
        
        .main-content {
            padding: 0 20px 20px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .layui-card {
            margin-top: 0;
            border-radius: 8px;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            border: none;
            background: #fff;
        }
        
        .layui-card-header {
            height: auto;
            padding: 20px 25px;
            line-height: 28px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-bottom: 1px solid #ebeef5;
            font-weight: 600;
            color: #303133;
        }
        
        .layui-card-header h3 {
            margin: 0;
            font-size: 18px;
            color: #409eff;
            display: flex;
            align-items: center;
        }
        
        .layui-card-header h3:before {
            content: '';
            width: 4px;
            height: 20px;
            background: linear-gradient(135deg, #409eff, #67c23a);
            margin-right: 10px;
            border-radius: 2px;
        }
        
        .layui-card-body {
            padding: 25px;
        }
        
        .search-form {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 20px;
            border: 1px solid #e8eaec;
        }
        
        .search-form .layui-form-label {
            width: 70px;
            font-weight: 500;
            color: #606266;
        }
        
        .search-form .layui-input,
        .search-form .layui-select {
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            transition: all 0.3s;
        }
        
        .search-form .layui-input:focus,
        .search-form .layui-select:focus {
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
        
        .layui-form-item {
            margin-bottom: 18px;
        }
        
        .layui-table-tool-temp {
            padding: 15px 0;
            border-bottom: 1px solid #ebeef5;
            margin-bottom: 15px;
        }
        
        .layui-btn {
            border-radius: 4px;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .layui-btn-normal {
            background-color: #409eff;
            border-color: #409eff;
        }
        
        .layui-btn-normal:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
        }
        
        .layui-btn-danger {
            background-color: #f56c6c;
            border-color: #f56c6c;
        }
        
        .layui-btn-danger:hover {
            background-color: #f78989;
            border-color: #f78989;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
        }
        
        .layui-btn-primary {
            border: 1px solid #dcdfe6;
            color: #606266;
        }
        
        .layui-btn-primary:hover {
            border-color: #409eff;
            color: #409eff;
        }
        
        .layui-footer {
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            color: #909399;
            font-size: 13px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            margin-top: 30px;
            border-top: 1px solid #ebeef5;
        }
        
        /* 表格样式优化 */
        .layui-table th {
            background-color: #fafbfc !important;
            color: #606266 !important;
            font-weight: 600 !important;
        }
        
        .layui-table tbody tr:hover {
            background-color: #f5f7fa !important;
        }
        
        /* 状态标签优化 */
        .layui-badge {
            border-radius: 12px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .layui-bg-blue {
            background-color: #409eff !important;
        }
        
        .layui-bg-orange {
            background-color: #e6a23c !important;
        }
        
        /* 响应式优化 */
        @media (max-width: 768px) {
            .header {
                padding: 0 15px;
                height: 60px;
                line-height: 60px;
            }
            
            .header h2 {
                font-size: 20px;
            }
            
            .main-content {
                padding: 0 10px 15px;
            }
            
            .layui-card-body {
                padding: 15px;
            }
            
            .search-form {
                padding: 15px;
            }
            
            .layui-col-md3,
            .layui-col-md2 {
                width: 100% !important;
                margin-bottom: 10px;
            }
        }
        
        /* 加载动画 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #409eff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 操作按钮组优化 */
        .action-buttons .layui-btn {
            margin-right: 5px;
            border-radius: 3px;
            font-size: 12px;
        }
        
        .action-buttons .layui-btn:last-child {
            margin-right: 0;
        }
        
        /* 搜索按钮组优化 */
        .search-buttons {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .search-buttons .layui-btn {
            min-width: 80px;
        }
        
        /* 工具栏优化 */
        .toolbar-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .toolbar-left,
        .toolbar-right {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .stats-info {
            color: #909399;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .stats-info span {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .stats-info i {
            color: #409eff;
        }
    </style>
</head>
<body>
    <!-- 加载动画 -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-spinner"></div>
    </div>

    <!-- 头部 -->
    <div class="header">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md8">
                    <h2><i class="layui-icon layui-icon-user" style="margin-right: 8px;"></i>学生管理系统</h2>
                </div>
                <div class="layui-col-md4" style="text-align: right;">
                    <span class="version-info">
                        <i class="layui-icon layui-icon-release"></i> Spring Boot JPA + LayUI Table
                    </span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 主要内容 -->
    <div class="layui-container main-content">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h3><i class="layui-icon layui-icon-table"></i>学生信息管理</h3>
                    </div>
                    <div class="layui-card-body">
                        <!-- 搜索表单 -->
                        <form class="layui-form search-form" lay-filter="searchForm">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md3">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"><i class="layui-icon layui-icon-user"></i>姓名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" placeholder="请输入学生姓名" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i>学号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="sno" placeholder="请输入学号" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md2">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"><i class="layui-icon layui-icon-date"></i>年龄</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="age" placeholder="年龄" class="layui-input" min="1" max="100">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md2">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"><i class="layui-icon layui-icon-friends"></i>性别</label>
                                        <div class="layui-input-block">
                                            <select name="sex">
                                                <option value="">全部</option>
                                                <option value="1">男</option>
                                                <option value="0">女</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md2">
                                    <div class="layui-form-item">
                                        <div class="layui-input-block search-buttons" style="margin-left: 0;">
                                            <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="search">
                                                <i class="layui-icon layui-icon-search"></i> 搜索
                                            </button>
                                            <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn">
                                                <i class="layui-icon layui-icon-refresh"></i> 重置
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        
                        <!-- 工具栏 -->
                        <div class="layui-table-tool-temp">
                            <div class="toolbar-section">
                                <div class="toolbar-left">
                                    <button class="layui-btn layui-btn-normal" id="addBtn">
                                        <i class="layui-icon layui-icon-add-1"></i> 添加学生
                                    </button>
                                    <button class="layui-btn layui-btn-danger" id="deleteBtn">
                                        <i class="layui-icon layui-icon-delete"></i> 批量删除
                                    </button>
                                    <button class="layui-btn layui-btn-primary" id="exportBtn">
                                        <i class="layui-icon layui-icon-export"></i> 导出数据
                                    </button>
                                </div>
                                <div class="toolbar-right">
                                    <div class="stats-info">
                                        <span><i class="layui-icon layui-icon-chart"></i>总计: <strong id="totalCount">0</strong> 条</span>
                                        <span><i class="layui-icon layui-icon-male"></i>男: <strong id="maleCount">0</strong></span>
                                        <span><i class="layui-icon layui-icon-female"></i>女: <strong id="femaleCount">0</strong></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据表格 -->
                        <table id="studentTable" lay-filter="studentTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部 -->
    <div class="layui-footer">
        <p>
            <i class="layui-icon layui-icon-heart-fill" style="color: #f56c6c;"></i>
            &copy; 2024 学生管理系统 - Spring Boot JPA + LayUI Table 实验项目
            <span style="margin-left: 20px;">
                <i class="layui-icon layui-icon-code-circle"></i> 
                Powered by LayUI & Thymeleaf
            </span>
        </p>
    </div>
    
    <!-- 表格操作列模板 -->
    <script type="text/html" id="toolbarDemo" th:inline="none">
        <div class="action-buttons">
            <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail" title="查看详情">
                <i class="layui-icon layui-icon-about"></i> 查看
            </a>
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" title="编辑信息">
                <i class="layui-icon layui-icon-edit"></i> 编辑
            </a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" title="删除学生">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </a>
        </div>
    </script>
    
    <!-- 性别格式化模板 -->
    <script type="text/html" id="sexTpl" th:inline="none">
        {{# if(d.sex == 1){ }}
            <span class="layui-badge layui-bg-blue"><i class="layui-icon layui-icon-male"></i> 男</span>
        {{# } else { }}
            <span class="layui-badge layui-bg-orange"><i class="layui-icon layui-icon-female"></i> 女</span>
        {{# } }}
    </script>
    
    <!-- 添加/编辑学生的表单模板 -->
    <script type="text/html" id="studentFormTpl" th:inline="none">
        <form class="layui-form" id="studentForm" lay-filter="studentForm" style="padding: 25px;">
            <input type="hidden" name="id" id="studentId">
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-user"></i> 姓名 <span style="color: #f56c6c;">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="studentName" required lay-verify="required" placeholder="请输入学生姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i> 学号 <span style="color: #f56c6c;">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="sno" id="studentSno" required lay-verify="required" placeholder="请输入学号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-date"></i> 年龄 <span style="color: #f56c6c;">*</span></label>
                <div class="layui-input-block">
                    <input type="number" name="age" id="studentAge" required lay-verify="required|number" placeholder="请输入年龄" class="layui-input" min="1" max="100">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-friends"></i> 性别 <span style="color: #f56c6c;">*</span></label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>
        </form>
    </script>
    
    <!-- LayUI JS -->
    <script th:src="@{/layui/layui.js}"></script>
    
    <!-- 主要JavaScript代码 -->
    <script th:inline="none">
    /*<![CDATA[*/
        layui.use(['table', 'form', 'layer', 'jquery'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            
            // 显示加载动画
            function showLoading() {
                $('#loadingOverlay').show();
            }
            
            // 隐藏加载动画
            function hideLoading() {
                $('#loadingOverlay').hide();
            }
            
            // 更新统计信息
            function updateStats(data) {
                var total = data.length;
                var male = data.filter(item => item.sex == 1).length;
                var female = data.filter(item => item.sex == 0).length;
                
                $('#totalCount').text(total);
                $('#maleCount').text(male);
                $('#femaleCount').text(female);
            }
            
            // 渲染表格
            var tableIns = table.render({
                elem: '#studentTable',
                url: '/api/students',
                page: true,
                limits: [10, 20, 50, 100],
                limit: 15,
                height: 'full-200',
                even: true,
                size: 'lg',
                width: '100%',
                text: {
                    none: '<div style="text-align: center; padding: 30px;"><i class="layui-icon layui-icon-face-cry" style="font-size: 30px; color: #d3dce6;"></i><br><br>暂无数据</div>'
                },
                cols: [[
                    {type: 'checkbox', fixed: 'left', width: 60},
                    {field: 'id', title: 'ID', width: 80, sort: true, align: 'center'},
                    {field: 'name', title: '姓名', width: 160, align: 'center'},
                    {field: 'sno', title: '学号', width: 200, align: 'center'},
                    {field: 'age', title: '年龄', width: 160, sort: true, align: 'center'},
                    {field: 'sex', title: '性别', width: 160, templet: '#sexTpl', align: 'center'},
                    {title: '操作', width: 400, align: 'center', fixed: 'right', toolbar: '#toolbarDemo'}
                ]],
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'message',
                    countName: 'count',
                    dataName: 'data'
                },
                parseData: function(res) {
                    if (res.code === 0 && res.data) {
                        return {
                            code: res.data.code,
                            msg: res.data.msg,
                            count: res.data.count,
                            data: res.data.data
                        };
                    }
                    return res;
                },
                done: function(res, curr, count) {
                    hideLoading();
                    if (res.code === 0 && res.data) {
                        updateStats(res.data);
                    }
                },
                loading: true
            });
            
            // 搜索
            form.on('submit(search)', function(data) {
                showLoading();
                var searchData = data.field;
                
                // 移除空值
                Object.keys(searchData).forEach(key => {
                    if (searchData[key] === '' || searchData[key] === null) {
                        delete searchData[key];
                    }
                });
                
                tableIns.reload({
                    where: searchData,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });
            
            // 重置搜索
            $('#resetBtn').click(function() {
                showLoading();
                $('form[lay-filter="searchForm"]')[0].reset();
                form.render();
                tableIns.reload({
                    where: {},
                    page: {
                        curr: 1
                    }
                });
            });
            
            // 添加学生
            $('#addBtn').click(function() {
                openStudentForm('添加学生', {});
            });
            
            // 批量删除
            $('#deleteBtn').click(function() {
                var checkStatus = table.checkStatus('studentTable');
                var data = checkStatus.data;
                
                if (data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 7});
                    return;
                }
                
                layer.confirm('确定要删除选中的 ' + data.length + ' 条数据吗？', {
                    icon: 3,
                    title: '批量删除确认',
                    skin: 'layui-layer-molv'
                }, function(index) {
                    showLoading();
                    var ids = data.map(function(item) {
                        return item.id;
                    });
                    
                    $.ajax({
                        url: '/api/students',
                        type: 'DELETE',
                        contentType: 'application/json',
                        data: JSON.stringify(ids),
                        success: function(res) {
                            hideLoading();
                            if (res.code === 0) {
                                layer.msg('删除成功', {icon: 1});
                                tableIns.reload();
                            } else {
                                layer.msg('删除失败：' + res.message, {icon: 2});
                            }
                        },
                        error: function() {
                            hideLoading();
                            layer.msg('服务器错误，请稍后再试', {icon: 2});
                        }
                    });
                    
                    layer.close(index);
                });
            });
            
            // 导出数据
            $('#exportBtn').click(function() {
                layer.msg('导出功能开发中...', {icon: 6});
            });
            
            // 监听行工具事件
            table.on('tool(studentTable)', function(obj) {
                var data = obj.data;
                
                if (obj.event === 'detail') {
                    viewStudent(data);
                } else if (obj.event === 'edit') {
                    openStudentForm('编辑学生', data);
                } else if (obj.event === 'del') {
                    layer.confirm('确定要删除 "' + data.name + '" 这名学生吗？', {
                        icon: 3,
                        title: '删除确认',
                        skin: 'layui-layer-molv'
                    }, function(index) {
                        showLoading();
                        $.ajax({
                            url: '/api/students/' + data.id,
                            type: 'DELETE',
                            success: function(res) {
                                hideLoading();
                                if (res.code === 0) {
                                    layer.msg('删除成功', {icon: 1});
                                    obj.del();
                                    // 更新统计信息
                                    var currentData = table.cache.studentTable;
                                    updateStats(currentData);
                                } else {
                                    layer.msg('删除失败：' + res.message, {icon: 2});
                                }
                            },
                            error: function() {
                                hideLoading();
                                layer.msg('服务器错误，请稍后再试', {icon: 2});
                            }
                        });
                        
                        layer.close(index);
                    });
                }
            });
            
            // 打开学生表单
            function openStudentForm(title, student) {
                var isEdit = !!student.id;

                layer.open({
                    type: 1,
                    title: '<i class="layui-icon ' + (isEdit ? 'layui-icon-edit' : 'layui-icon-add-1') + '"></i> ' + title,
                    content: $('#studentFormTpl').html(),
                    area: ['550px', '450px'],
                    btn: ['<i class="layui-icon layui-icon-ok"></i> 保存', '<i class="layui-icon layui-icon-close"></i> 取消'],
                    shade: 0.6,
                    shadeClose: false,
                    success: function(layero, index) {
                        // 填充表单数据
                        if (student.id) {
                            layero.find('#studentId').val(student.id);
                            layero.find('#studentName').val(student.name);
                            layero.find('#studentSno').val(student.sno);
                            layero.find('#studentAge').val(student.age);
                            layero.find('input[name="sex"][value="' + student.sex + '"]').prop('checked', true);
                        }
                        // 关键：弹窗内容插入后，重新渲染表单
                        form.render(null, 'studentForm');
                    },
                    yes: function(index, layero) {
                        // 获取表单数据
                        var formData = {
                            name: layero.find('#studentName').val().trim(),
                            sno: layero.find('#studentSno').val().trim(),
                            age: parseInt(layero.find('#studentAge').val()),
                            sex: parseInt(layero.find('input[name="sex"]:checked').val())
                        };
                        
                        // 验证数据
                        if (!formData.name) {
                            layer.msg('请输入学生姓名', {icon: 7});
                            return;
                        }
                        if (!formData.sno) {
                            layer.msg('请输入学号', {icon: 7});
                            return;
                        }
                        if (!formData.age || formData.age < 1 || formData.age > 100) {
                            layer.msg('请输入有效的年龄(1-100)', {icon: 7});
                            return;
                        }
                        
                        var url = '/api/students';
                        var method = 'POST';
                        
                        if (student.id) {
                            url += '/' + student.id;
                            method = 'PUT';
                            formData.id = student.id;
                        }
                        
                        // 显示保存中状态
                        var loadIndex = layer.load(2);
                        
                        // 提交数据
                        $.ajax({
                            url: url,
                            type: method,
                            contentType: 'application/json',
                            data: JSON.stringify(formData),
                            success: function(res) {
                                layer.close(loadIndex);
                                if (res.code === 0) {
                                    layer.close(index);
                                    layer.msg(student.id ? '更新成功' : '添加成功', {icon: 1});
                                    tableIns.reload();
                                } else {
                                    layer.msg((student.id ? '更新' : '添加') + '失败：' + res.message, {icon: 2});
                                }
                            },
                            error: function() {
                                layer.close(loadIndex);
                                layer.msg('服务器错误，请稍后再试', {icon: 2});
                            }
                        });
                    }
                });
            }
            
            // 查看学生详情
            function viewStudent(student) {
                layer.open({
                    type: 1,
                    title: '<i class="layui-icon layui-icon-about"></i> 学生详情',
                    content: '<div style="padding: 25px; line-height: 2;">' +
                        '<div class="layui-form-item">' +
                            '<label class="layui-form-label" style="width: 80px;"><i class="layui-icon layui-icon-username"></i> ID：</label>' +
                            '<div class="layui-input-block" style="margin-left: 90px;">' +
                                '<div class="layui-form-mid" style="color: #409eff; font-weight: 600;">' + student.id + '</div>' +
                            '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                            '<label class="layui-form-label" style="width: 80px;"><i class="layui-icon layui-icon-user"></i> 姓名：</label>' +
                            '<div class="layui-input-block" style="margin-left: 90px;">' +
                                '<div class="layui-form-mid" style="font-weight: 500;">' + student.name + '</div>' +
                            '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                            '<label class="layui-form-label" style="width: 80px;"><i class="layui-icon layui-icon-username"></i> 学号：</label>' +
                            '<div class="layui-input-block" style="margin-left: 90px;">' +
                                '<div class="layui-form-mid" style="color: #67c23a; font-weight: 500;">' + student.sno + '</div>' +
                            '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                            '<label class="layui-form-label" style="width: 80px;"><i class="layui-icon layui-icon-date"></i> 年龄：</label>' +
                            '<div class="layui-input-block" style="margin-left: 90px;">' +
                                '<div class="layui-form-mid">' + student.age + ' 岁</div>' +
                            '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                            '<label class="layui-form-label" style="width: 80px;"><i class="layui-icon layui-icon-friends"></i> 性别：</label>' +
                            '<div class="layui-input-block" style="margin-left: 90px;">' +
                                '<div class="layui-form-mid">' + 
                                    '<span class="layui-badge ' + (student.sex == 1 ? 'layui-bg-blue' : 'layui-bg-orange') + '">' +
                                        '<i class="layui-icon ' + (student.sex == 1 ? 'layui-icon-male' : 'layui-icon-female') + '"></i> ' +
                                        (student.sex == 1 ? '男' : '女') +
                                    '</span>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>',
                    area: ['450px', '400px'],
                    shade: 0.6,
                    shadeClose: true
                });
            }
            
            // 初始化完成，隐藏加载动画
            hideLoading();
        });
    /*]]>*/
    </script>
</body>
</html>